<style scoped lang="less">
.uni-iot-title{
	margin-top: 10px;
}
.duty-user{
	padding: 10px;
	background: #061D54;
	color: rgba(255,255,255,.8);
	.details{
		p{
			line-height: 1.7;
			margin-bottom: 5px;
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	b{
		color: #fff;
		font-weight: normal;
	}
	.avatar{
		width: 110px;
		margin-right: 20px;
		img{
			display: block;
			width: 100%;
		}
	}
}
</style>
<template>
	<div class="page-setting">
		<div class="crumbs">
			<router-link to="/">首页</router-link> / <span>消防档案</span> / <span class="active">值班人员</span>
		</div>
		<el-container :style="{height: mainH+'px'}">
		  	<el-main class="census-main">
		  		<div class="flex v-c">
		  			<div class="flex-1">
		  				<el-button v-if="hasPermission('029023')" type='primary' @click="dutyPersonModalVisible=true">值班人员</el-button>
		  				<el-button type='primary' @click="dutyLogModalVisible=true">值班记录</el-button>
		  			</div>
					<template v-if="hasPermission('029024')">
						<el-button type='red' v-if="dutyFlag==1" @click="startDuty">开始值班</el-button>
		  				<el-button type='red' v-if="dutyFlag==2" @click="endDuty">结束值班</el-button>
					</template>
		  			
		  		</div>
		  		<div class="uni-iot-title flex v-c">
					<i class="line flex-1"></i>
					<h2>在值人员</h2>
					<i class="line flex-1"></i>
				</div>
				<div class="data-none" v-if="onDutyList.length==0">暂无在值人员</div>
				<el-row :gutter="20">
					<el-col class="mb-20" :xl="6" :lg="8" v-for="(item, index) in onDutyList" :key="index">
						<div class="duty-user flex">
							<div class="avatar">
								<img :src="item.img || defaultAvatar" alt="">
							</div>
							<div class="flex-1 details">
								<p><b>姓名：</b>{{item.name}}</p>
								<p><b>单位：</b>{{siteInfos.homeName}}</p>
								<p><b>职务：</b>{{item.post}}</p>
								<p><b>办电：</b>{{item.tel}}</p>
								<p><b>手机：</b>{{item.phone}}</p>
							</div>
						</div>
					</el-col>
				</el-row>
				<!-- <p class="data-none">暂无在值人员</p> -->
		  	</el-main>
		</el-container>
		<!-- 值班人员 start -->
		<el-dialog v-if="dutyPersonModalVisible" title="值班人员" :visible.sync="dutyPersonModalVisible" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close>
			<DutyPerson ref="dutyPerson"></DutyPerson>
		</el-dialog>
		<!-- 值班人员 end -->
		<!-- 值班记录 start -->
		<el-dialog v-if="dutyLogModalVisible" title="值班记录" :visible.sync="dutyLogModalVisible" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close>
			<DutyLog ref="dutyLog"></DutyLog>
		</el-dialog>
		<!-- 值班记录 end -->
	</div>
</template>
<script>
import { mapState } from 'vuex'
import DutyPerson from '@/components/archive/DutyPerson.vue'
import DutyLog from '@/components/archive/DutyLog.vue'
const defaultAvatar = require('../../assets/images/duty-avatar.jpg')
export default {
	name: 'Users',
	components: {
		DutyPerson,
		DutyLog
	},
	props: {
		winH: {
			type: Number,
			default: 500
		}
	},
	data () {
		return {
			defaultAvatar: defaultAvatar,
			dutyPersonModalVisible: false,
			dutyLogModalVisible: false,
			onDutyList: [],
			page: 1,
			pageSize: 10,
			dutyFlag: '0'
		}
	},
	watch: {},
	computed: {
		...mapState([
			'siteInfos'
		]),
		mainH () {
			return this.winH-219
		}
	},
	methods: {
		getData (page) {
			this.loading = true
			this.$get('/check/dutyPerson/nowDutyPerson', {
            	page: page,
			    limit: this.pageSize
            }).then(res => {
            	this.loading = false
            	let data = res.data
                this.currentPage = page
                this.total = data.totalSize
				this.onDutyList = data.Items
            }, (err) =>{
            	this.loading = false
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		getStatus (data) {
			this.$get('/check/dutyPerson/isNeedDuty').then(res => {
            	this.dutyFlag = res.data.dutyFlag
            }, (err) =>{
            	this.loading = false
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		startDuty () {
			this.$post('/check/dutyPerson/startDuty').then(res => {
				this.getData(1)
				this.dutyFlag = 2
            }, (err) =>{
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		endDuty () {
			this.$post('/check/dutyPerson/endDuty').then(res => {
            	this.getData(1)
				this.dutyFlag = 1
            }, (err) =>{
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		}
	},
	created () {
		this.getData(1)
		this.getStatus()
	},
	activated () {
		
	},
	mounted () {
		
	}
}
</script>
